<template>
	<el-container>
		<el-header style="height: 20px;z-index: 1000000;">
			<el-button type='success' size="mini" @click="sendSql()" icon="el-icon-caret-right">执行</el-button>  
			<span style="color: red;">说明：表名请带上数据库如 database.table</span>
		</el-header>
		<el-container>
			<el-main>
				<el-input ref="sql" type="textarea" :rows="11" v-model="sql"/>
			</el-main>
		</el-container>
		<el-tabs v-model="activeName" type="card" v-if="!firstSearch">
			<el-tab-pane label="结果集" name="first">
				<el-table :data="tableData.slice((page-1)*limit,page*limit)" border height="400" style="width: 100%;" :highlight-current-row="true">
					<el-table-column fixed="left" v-if="tableLabel.length>0" label="序号" type="index" width="50"></el-table-column>
					<el-table-column fixed="left" v-if="tableLabel[0]" :prop="tableLabel[0]" :label="tableLabel[0]" width="210"></el-table-column>
					<el-table-column v-for="(data, index) in tableLabel.slice(1)" :key="index" :prop="data" :label="data" min-width="120"></el-table-column>
				</el-table>
				<el-pagination v-if="total>10" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50,100]"
				 	:page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" 
				 	style="margin-top: 10px;float: right">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane label="信息" name="second"><div style="color: red;">{{error_info}} </div></el-tab-pane>
		</el-tabs>
	</el-container>
</template>

<script>
	import {mapGetters} from 'vuex'
	import bus from '../utils/bus'
	import * as taos from '../api/taosrestful.js'
	
	export default {
		name: "sqlsearch",
		data() {
			return {
				tableData:[],
				sql:'',
				tableLabel:[],
				total:0,
				page:1,
				limit:10,
				activeName:'first',
				error_info:'',
				firstSearch: true,
				curDb:''
			}
		},
		computed: {
			...mapGetters(['curObject','link'])
		},
		created() {

		},
		methods:{
			sendSql(){
				const dom = this.$refs.sql.$refs.textarea
				let tmpSql = this.sql
				if(dom.selectionStart && dom.selectionEnd && dom.selectionStart!=dom.selectionEnd){
					tmpSql = tmpSql.replaceAll("(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))", "")
					tmpSql = tmpSql.substring(dom.selectionStart,dom.selectionEnd)
				}
				let link = this.link
				let payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				taos.rawSqlWithDB(this.curDb,tmpSql,payload).then(data => {
					if(data.res){
						if(data.data.length>0){
							this.tableLabel = Object.keys(data.data[0])
							this.tableData = data.data
						}else{
							this.tableLabel = data.head
							this.tableData = []
							this.page=1
							this.limit=10
						}
						this.total = data.count
						this.activeName = 'first'
						this.error_info = ''
					} else {
						this.page=1
						this.limit=10
						this.tableLabel = []
						this.tableData = []
						this.total = 0
						this.activeName = 'second'
						this.error_info = data.msg+'【'+tmpSql+'】'
					}
					this.firstSearch = false
				})
			},
			handleSizeChange(val){
				this.limit = val
			},
			handleCurrentChange(val){
				this.page = val
			},
		}
	}
</script>
<style>
</style>
